@import '~@/assets/css/mixins';

.page_content_title {
  width: 100%;
  height: 120px;

  .title_item {
    position: relative;
    float: left;
    width: calc(20% - 19.2px);
    height: 100%;
    padding: 24px;
    background: #fff;

    .num {
      margin-right: 9px;
      color: rgb(0 0 0 / 85%);
      font-weight: bold;
      font-size: 24px;
      line-height: 33px;
    }

    p {
      text-indent: 10px;
    }

    p:nth-child(2) {
      margin-top: 20px;
      line-height: 33px;
    }

    .iconfont_box {
      position: absolute;
      top: calc(50% - 32px);
      right: 24px;
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      background: rgb(91 143 249 / 10%);
      border-radius: 50%;
    }
  }

  .title_item_padding {
    margin-left: 24px;
  }
}

.content {
  width: 100%;
  height: 402Px;

  /* no */
  margin-top: 24px;

  .left {
    float: left;
    width: calc(40% - 15px);
    height: 402Px;

    /* no */
    background-color: #fff;
  }

  .right {
    float: right;
    width: calc(60% - 9px);
    height: 402Px;

    /* no */
    margin-left: 24px;
    background-color: #fff;
  }
}

.footer {
  width: 100%;
  height: 414Px;

  /* no */
  margin: 24px 0;

  .left {
    float: left;
    width: calc(50% - 12px);
    height: 100%;
    background-color: #fff;
  }

  .right {
    float: right;
    width: calc(50% - 12px);
    height: 100%;
    margin-left: 24px;
    background-color: #fff;
  }
}

.header {
  width: 100%;
  height: 64px;
  padding: 0 24px;
  line-height: 64px;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.content_item {
  width: 100%;
  height: calc(100% - 65px);
  padding: 24px;
  overflow-y: auto;

  .empty {
    width: 100%;

    img {
      height: 100px;
      margin: 20px 0 10px;
      margin-left: 50%;
      transform: translateX(-50%);
    }

    p {
      width: 100%;
      color: #d9d9d9;
      text-align: center;
    }
  }

  ul {
    li {
      clear: both;
      width: 100%;
      margin-bottom: 10px;

      p:nth-child(1) {
        height: 24px;

        span:nth-child(1) {
          display: block;
          float: left;
          width: 24px;
          height: 24px;
          color: #fff;
          line-height: 24px;
          text-align: center;
          background-color: #0084ff;
          border-radius: 2px;
        }

        span:nth-child(2) {
          display: block;
          float: left;
          height: 24px;
          margin-left: 10px;
          line-height: 24px;
        }

        span:nth-child(3) {
          display: block;
          float: right;
          height: 24px;
          line-height: 24px;
        }
      }

      p:nth-child(2) {
        width: 100%;
        height: 4px;
        margin: 10px 0;
        background-color: #fafafa;
        border-radius: 2px;

        span {
          display: block;
          width: 0;
          height: 100%;
          background-color: #0084ff;
          border-radius: 2px;
        }
      }
    }

    li:nth-child(1) {
      p:nth-child(1) {
        span:nth-child(1) {
          background-color: #ef5350;
        }
      }

      p:nth-child(2) {
        span {
          background-color: #ef5350;
        }
      }
    }

    li:nth-child(2) {
      p:nth-child(1) {
        span:nth-child(1) {
          background-color: #f37334;
        }
      }

      p:nth-child(2) {
        span {
          background-color: #f37334;
        }
      }
    }

    li:nth-child(3) {
      p:nth-child(1) {
        span:nth-child(1) {
          background-color: #f3ac34;
        }
      }

      p:nth-child(2) {
        span {
          background-color: #f3ac34;
        }
      }
    }
  }
}

.content_itemCard {
  padding: 24px 0;
}
